<template>
  <div>
    <van-nav-bar title="长者动态" :right-text="showPeople" @click-right="togglePeople = true" />

    <div>
      <van-notice-bar left-icon="volume-o" scrollable text="每周2次体检,有助于老年人身体健康;每周2次体检,有助于老年人身体健康;每周2次体检,有助于老年人身体健康" />
    </div>
    <!-- 查看日期 -->
    <div class="info-date">
      <!-- <van-cell
        title-class="date-title"
        title="查看日期"
        :value="date"
        @click="show = true"
      /> -->
      <van-calendar title="日历" ref="d" :poppable="false" :show-confirm="false" :min-date="minDate" :max-date="maxDate"
        :default-date="curdate" :show-title="false" color="#3396fc" :style="{ height: '18vh' }" />
    </div>
    <!-- 状态 -->
    <div class="info-list">
      <div class="info-item" @click="dataDetail('xy')">
        <van-icon class="info-icon" name="service-o" />
        <div class="info-title">血压</div>
        <div class="info-value">
          <span>80/180</span>
          <span>mmHG/L</span>
        </div>
      </div>
      <div class="info-item" @click="dataDetail('tw')">
        <van-icon class="info-icon" name="chat-o" />
        <div class="info-title">体温</div>
        <div class="info-value">
          <span>37.8</span>
          <span>℃</span>
        </div>
      </div>
      <div class="info-item" @click="dataDetail('xt')">
        <van-icon class="info-icon" name="fire-o" />
        <div class="info-title">血糖</div>
        <div class="info-value">
          <span>5.8</span>
          <span>mmol/L</span>
        </div>
      </div>
      <div class="info-item" @click="dataDetail('xl')">
        <van-icon class="info-icon" name="photo-o" />
        <div class="info-title">心率</div>
        <div class="info-value">
          <span>92</span>
          <span>bpm</span>
        </div>
      </div>

      <div class="info-item" @click="dataDetail('sm')">
        <van-icon class="info-icon" name="underway-o" />
        <div class="info-title">睡眠</div>
        <div class="info-value"><span>长睡眠8小时</span></div>
      </div>
    </div>

    <!-- 日程 -->
    <div class="info-actions">
      <div class="action-item" @click="goto('chat')">
        <div class="action-title">
          <div>
            <span class="action-time">10:00</span>
            <span class="action-name">远程探视</span>
          </div>
          <van-icon name="bars" />
        </div>
        <div class="action-detail">
          <van-icon class="action-icon" name="phone" />
          <div class="action-mark">
            <div class="mark-item">点击进行探视</div>
            <div class="mark-item">已支付</div>
            <div class="mark-item">李平原(大儿子)</div>
          </div>
        </div>
      </div>

      <div class="action-item" @click="goto('service')">
        <div class="action-title">
          <div>
            <span class="action-time">12:00</span>
            <span class="action-name">营养加餐</span>
          </div>
          <van-icon name="bars" />
        </div>
        <div class="action-detail">
          <van-icon class="action-icon" name="friends" />
          <div class="action-mark">
            <div class="mark-item">喂香蕉</div>
            <div class="mark-item">
              <span>服务人员 </span> <span>张大姐</span>
            </div>
            <div class="mark-item">
              <span>人员工号</span> <span>12231</span>
            </div>
            <div class="mark-item">已支付</div>
            <div class="mark-item">李平原(大儿子)</div>
          </div>
        </div>
      </div>

      <div class="action-item" @click="goto('service')">
        <div class="action-title">
          <div>
            <span class="action-time">13:00</span>
            <span class="action-name">实时喂药</span>
          </div>
          <van-icon name="bars" />
        </div>
        <div class="action-detail">
          <van-icon class="action-icon" name="friends" />
          <div class="action-mark">
            <div class="mark-item">
              <span>服务人员 </span> <span>张大姐</span>
            </div>
            <div class="mark-item">
              <span>人员工号</span> <span>12231</span>
            </div>
            <div class="mark-item">已支付</div>
            <div class="mark-item">李平原(大儿子)</div>
          </div>
        </div>
      </div>

      <div class="action-item">
        <div class="action-title">
          <div>
            <span class="action-time">14:00</span>
            <span class="action-name">心理疏导</span>
          </div>
          <van-icon name="bars" />
        </div>
        <div class="action-detail">
          <van-icon class="action-icon" name="friends" />
          <div class="action-mark">
            <div class="mark-item">
              <span>心理咨询师</span> <span>李四</span>
            </div>
            <div class="mark-item">待支付</div>
          </div>
        </div>
      </div>
    </div>



    <!-- <van-calendar
      v-model="show"
      :min-date="minDate"
      :max-date="maxDate"
      color="#3396fc"
      :style="{ height: '500px' }"
      @confirm="changeDate"
    /> -->
    <van-popup class="people-dialog" v-model="togglePeople">
      <van-picker title="标题" show-toolbar :columns="peoples" :default-index="peopleIndex"
        @confirm="togglePeople = false" @cancel="togglePeople = false" @change="setPeople" />
    </van-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        minDate: new Date(2010, 0, 1),
        maxDate: new Date(),
        curdate: new Date(2021, 10, 1),
        peoples: ["父亲", "母亲"],
        peopleIndex: 0,
        togglePeople: false,
      };
    },
    computed: {
      showPeople() {
        return this.peoples[this.peopleIndex];
      },
    },
    created() {
      this.date = this.formatDate(new Date());
    },
    mounted() {
      console.log("ref", this.$refs);
    },
    methods: {
      formatDate(date) {
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      },
      changeDate(date) {
        this.show = false;
        this.date = this.formatDate(date);
      },
      setPeople(picker, values) {
        this.peopleIndex = this.peoples.indexOf(values)
        this.togglePeople = false;
      },
      dataDetail(d) {
        this.$router.push('/data?t=' + d);
      },
      goto(service) {
        if (service == "chat") {
          this.$router.push('/chat');
        }
        if (service == "service") {
          this.$router.push('/work');
        }
      }
    },
  };
</script>

<style>
  .info-date {
    margin: 1vw;
    border: 1px solid #3396fc;
  }

  .date-title {
    text-align: left;
  }

  .info-list {
    margin-top: 3vh;
  }

  .info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2vw 1vw;
    border-bottom: 1px solid #f2f2f2f2;
  }

  .info-icon {
    flex-basis: 10vw;
  }

  .info-title {
    text-align: left;
    flex-basis: 25vw;
  }

  .info-actions {
    padding: 5.5vh 0;
    /* height: 32vh; */
    /* overflow-y: scroll; */
  }

  .action-item {
    padding: 4vw;
    margin: 2vw;
    border: 1px solid #3396fc;
    border-radius: 5px;
  }

  .action-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vh;
    padding-bottom: 2vw;
    border-bottom: 1px solid #eee;
  }

  .action-time {
    color: #3396fc;
    font-size: 18px;
    font-weight: 700;
    margin-right: 2vw;
  }

  .action-name {
    font-size: 14px;
  }

  .action-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .action-icon {
    font-size: 20vw;
    margin-right: 5vw;
  }

  .action-mark {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .mark-item {
    padding: 1vw;
  }

  .people-dialog {
    width: 100%;
  }
</style>